<template>
	<view class="content">
		<template v-if="list.length>0">
			<view class="info-list" v-for="item in list" :key="item.id"
				@click="navigate('/pages/community/detail?id='+item.id)">
				<image :src="item.face_url?item.face_url: '/static/images/news/content.png'" class="info-img"></image>
				<view class="info-item">
					<view class="title">{{item.title}}</view>
					<view class="describe">{{item.address}}</view>
				</view>
			</view>
		</template>
		<view v-else-if="list.length==0&&!more" style="text-align: center;">暂无数据</view>
		<view v-if="list.length>0&&!more" style="text-align: center;">没有更多了</view>
	</view>
</template>

<script>
	import {
		getBuildListApi
	} from '@/api/community.js'
	import {
		isMore
	} from '@/util/util.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				more: true,
				type: 0
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getBuildListApi({
					page: this.page,
					limit: this.limit,
					category_id: this.type
				}).then(data => {
					uni.hideLoading()
					console.log(data)
					let list = data.list || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.page, this.limit, data.count);
				}).catch(() => {
					uni.hideLoading()
				})
			}
		},
		onReachBottom() {
			if (this.more) {
				this.page++;
				this.getList()
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.title
			})
			this.type = e.id
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f5;
		padding: 30rpx;
		min-height: 100vh;

		.info-list {
			padding: 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.info-img {
				width: 180rpx;
				height: 180rpx;
				margin-right: 30rpx;
			}

			.info-item {
				width: calc(100% - 210rpx);
				display: flex;
				flex-direction: column;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 超出几行省略 */
					overflow: hidden;
					line-height: 60rpx;
				}

				.describe {
					line-height: 60rpx;
					font-size: 28rpx;
					color: #767676;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>